body{margin: 0px;padding: 0px;
  font-family: 'Droid Sans', 'Helvetica', Arial, sans-serif;
}

#map {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    position: absolute; 
    top: 65px; 
    left: 0; 
    right: 0;
    bottom: 0;
    background: rgba(45, 216, 242, 0.5); 
}
h1 {
   display: block;
   margin: 0px;
   padding: 0px;
   left: 0px;
   left: center; 
   color:white;
}


#cabecera {
  
  height: 64px;
  background:-o-linear-gradient(top,#000 0,rgba(196,228,255,0.4) 100%);
  background:-ms-linear-gradient(top,#000 0,rgba(196,228,255,0.4) 100%);
  background:-webkit-linear-gradient(top,#000 0,rgba(196,228,255,0.4) 100%);
  background:-moz-linear-gradient(top,#000 0,rgba(196,228,255,0.4) 100%);
  
  background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#000),color-stop(100%,rgba(196,228,255,0.4)));
  background:linear-gradient(to bottom,#000 0,rgba(196,228,255,0.4) 100%);
  -webkit-box-shadow:1px 1px 19px rgba(0,0,0,0.7) inset;-moz-box-shadow:1px 1px 19px rgba(0,0,0,0.7) inset;box-shadow:1px 1px 19px rgba(0,0,0,0.7) inset};

button {
    display: inline-block;
    vertical-align: top;
   
}
@media screen and (min-width: 600px) {
    h1 {
        display: inline;
        color:#F2F2F2;
    }
    button {
        display: inline-block;
        vertical-align: middle;
    }
    #cabecera {

      height: 50px;}
    #map {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        position: absolute; /* posición absoluta a navegador */
        top: 50px; /* 50px debajo de borde de navegador */
        left: 0; /* ajusta a borde de navegador */
        right: 0;
        bottom: 0;
        background: rgba(216, 225,118, 0.5);
    }
}